<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center payImmediately_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub payImmediately_fd0_0'>
				<view class='flex flex-wrap align-center'>
					<person></person>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='payImmediately_fd0_0_c1_c0'>银行汇款</text>
				</view>
				<view class='flex flex-wrap align-center payImmediately_fd0_0_c2'>
				</view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view style="padding: 8rpx 28rpx;background: #fff;">
			<back></back>
		</view>
		
		<view class="list">
			<view class="field_input">
				<u-field v-model="bankInfo.real_name" :disabled="true" label-width="200" input-align="right"
					label="收款方姓名" placeholder="收款方姓名"></u-field>
			</view>
			<view class="field_input">
				<u-field v-model="bankInfo.bank_name" :disabled="true" label-width="200" input-align="right"
					label="收款方银行" placeholder="收款方银行"></u-field>
			</view>
			<view class="field_input">
				<u-field v-model="bankInfo.bank_no" :disabled="true" label-width="200" input-align="right" label="收款方账户"
					placeholder="收款方账户"></u-field>
			</view>
			<view class="field_input">
				<u-field v-model="bank_name" label-width="200" input-align="right" label="银行名称"
					placeholder="请输入银行名称"></u-field>
			</view>
			<view class="field_input">
				<u-field v-model="bank_no" label-width="200" input-align="right" label="银行卡号"
					placeholder="请输入银行卡号"></u-field>
			</view>
			<view class="field_input">
				<u-field v-model="real_name" label-width="200" input-align="right" label="银行预留姓名"
					placeholder="请输入银行预留姓名"></u-field>
			</view>
			<view class="pay_img_text">汇款凭证</view>
			<view class="images_list" @tap.stop="uploadIMG">
				<view class="images_list_item" v-if="pay_img">
					<image :src='pay_img' mode="aspectFill"></image>
				</view>
				<view v-if="!pay_img" class="images_list_item">
					<image :src='STATIC_URL+"48.jpg"' mode="aspectFill"></image>
				</view>
			</view>
			<view class="tips">
				注：上传汇款信息，后台审核完成后进行充值，请耐心等待
			</view>
		</view>


		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex payImmediately_flex_2">
			<button class='payImmediately_fd2_0' @tap.stop="getSubmit">提交</button>

		</view>
		<view :style="{height: '152rpx'}"></view>


	</view>
</template>
<script>
	import back from "@/components/back/index.vue"
	import person from "@/components/person/index.vue"
	export default {
		components: {
			back,
			person
		},


		data() {
			return {
				"pay_way": "", // 支付方式
				"recharge_id": "", // 充值规则id
				"bankInfo": {}, // 收款方信息
				"bank_name": "",
				"bank_no": "",
				"real_name": "",
				"pay_img": "", // 支付凭证
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				recharge_id
			} = options
			if (recharge_id !== undefined) this.recharge_id = recharge_id
			this.bankInfo = global.bankInfo;
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getSubmit() {
				if (!this.bank_name) {
					this.$message.info('请输入银行名称');
					return;
				}
				if (!this.bank_no) {
					this.$message.info('请输入银行卡号');
					return;
				}
				if (!this.real_name) {
					this.$message.info('请输入银行预留真实姓名');
					return;
				}
				if (!this.pay_img) {
					this.$message.info('请上传汇款凭证');
					return;
				}
				this.$api.post(global.API_VERSION + '/647d826576b54', {
					recharge_id: this.recharge_id,
					pay_way: 'counter',
					bank_name: this.bank_name,
					real_name: this.real_name,
					bank_no: this.bank_no,
					pay_img: this.pay_img
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/qbgl/successfullyRecharged/successfullyRecharged?type=3'
							})
						}, 800)
					}
				})
			},
			// 上传图片
			uploadIMG(e) {
				let self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择

					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.API_VERSION +
									'/6438a7602dbc6', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								formData: {
									dir: 'images'
								},
								success: (uploadFileRes) => {
									self.pay_img = JSON.parse(uploadFileRes.data).data[0].path
								},
								fail: function(err) {
									console.log(err)
								}
							});
						}

					}
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.list {
		background: #fff;
		padding: 0 28rpx 28rpx;

		.field_input {}

		/deep/.u-field {
			padding: 24rpx 0;
			font-size: 30rpx !important;
		}

		.pay_img_text {
			font-size: 30rpx;
			margin: 24rpx 0;
		}

		.tips {
			color: #6A0002;
			font-size: 26rpx;
			margin-top: 16rpx;
		}

		.images_list {
			overflow: hidden;

			.images_list_item {
				float: left;
				margin: 0 16rpx 16rpx 0;
				width: 200rpx;
				height: 200rpx;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					border-radius: 8rpx;
				}

				.deImg {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 8rpx;
					right: 8rpx;
				}
			}
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto !important;
	}

	.payImmediately_flex_0 {
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.payImmediately_fd0_0_c2 {
		width: 32rpx;
		height: 32rpx;
	}

	.payImmediately_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #000000;
		line-height: 88rpx;
	}

	.payImmediately_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.payImmediately_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.payImmediately_flex_1 {
		background: #fff;
		background-size: #eee;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.payImmediately_fd1_1_c0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.payImmediately_fd1_1_c0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 24rpx 0rpx 24rpx;
	}

	.payImmediately_fd1_1_c0_c0 {
		width: 56rpx;
		height: 56rpx;
	}

	.payImmediately_fd1_1_c0 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.payImmediately_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: #666666;
	}

	.payImmediately_fd1_0 {
		border-bottom: 1px solid #eee;
		line-height: 45rpx;
		margin: 0rpx 0rpx 8rpx 0rpx;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.payImmediately_flex_2 {
		width: 750rpx;
		height: 152rpx;
		overflow: hidden;
		z-index: 5;
		bottom: calc(0rpx + var(--window-bottom));
	}

	.payImmediately_fd2_0 {
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 638rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
</style>